<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
    body{
        background-color: #ccc;
    }
    .d2{
        width:390px;
        height: 550px;
        border: 1px solid white;
        margin: 8px 8px;
        padding: 0;
        background-color: white;
        
        position: absolute;
        /*top: -448px;*/
        /*left: 766px;*/
        /*float: left;*/
        z-index: 999;
    }
    img{
        margin: 10px 10px;
    }
    .s1{
        display: block;
        width: 370px;
        margin: 0 10px;
    }
    .d1{
        width: 406px;
        height: 566px;
        border: 1px solid #ccc;
        padding: 0;
        background-color: orange;
        margin: 0;
        display: none;
        z-index: 9;
    }
    main{
        display: block;
        width: 600px;
        height: 600px;
        /*border: 1px solid black;*/
    }
    .d3,.d4{
        float: left;
    }
    .d3{
        width: 200px;
        height: 220px;
        background-color: white;
    }
    .d4{
        width: 200px;
        height: 220px;
        background-color: white;
    }
    .s2{
        display: block;
        width: 146px;
        height: 85px;
        margin-top: 40px;
        font-size: 12px;
        /*text-align: center;*/
    }
    .d5{
        width: 0px;
        height: 185px;
        background-color: gray;
        color: white;
        opacity:0.7;
        position: relative;
        top: -200px;
        left: 10px;
        overflow: hidden;
        /*display: none;*/  
    }
    .s3{
        display: block;
        width: 146px;
        height: 85px;
        margin: auto;
        font-size: 12px;
        margin-top: 40px;
    }
    .d6{
        width: 0px;
        height: 182px;
        background-color: gray;
        color: white;
        opacity:0.7;
        position: relative;
        top: -196px;
        left: 10px;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <main>
        
        <div class="d2">
            <img src="img/001.png">
            <span class="s1">设计上运用了层叠设计，形成立体倒放的花苞视觉效果，创意独特
                ，浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质雪纺面料让小衫更显质感穿着两双透气
                ，做工也相当考究
            </span>
        </div>
        <div class="d1"></div>
        
    </main>
    <footer>
        <div class="d3">
                <img class="m1" src="img/002.png">
            <div class="d5">
                <span class="s2">special品牌旗舰店<br><br>最具传奇浪漫色彩的欧洲<br>经典设计，给你带来专属<br>的魅力</span>
            </div>
        </div>
        <div class="d4">
                <img class="m2" src="img/003.png">
            <div class="d6">
                <span class="s3">sophy橡菲旗舰店<br><br>
                新款韩版微笑性感红唇上<br>
                衣圆领女短袖修身T恤</span>
            </div>
        </div>
        <div style="clear: both"></div>
        </footer>
</body>
</html>
<script>
        $('.d2').hover(function(){
            $('.d1').fadeIn("slow");
        },function(){
            $('.d1').fadeToggle("slow");
        });
    

        $('.m1').mouseenter(function(){
            $('.d5').animate({
                width:166,
            },300)
        });
        $('.d5').mouseleave(function(){
            $('.d5').animate({
                width:0,
            },300)
        });

        $('.m2').mouseenter(function(){
            $('.d6').animate({
                width:168,
            },300)
        });
        $('.d6').mouseleave(function(){
            $('.d6').animate({
                width:0,
            },300)
        });










</script>